<template>
  <el-tabs
    v-model="activeName"
    @tab-click="handleClick"
    class="label"
    type="border-card"
  >
    <el-tab-pane label="字段配置" name="first" >
      <div class="main">
        <div class="row seting">
          <Dimension
            :tableName="tableName"
            :unitId='unitId'
            @centerControl="setData"
          ></Dimension>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="条件筛选" name="second">
        <filter-cond :param="fileds" ref="filterCond" @centerControl="setData"></filter-cond>
    </el-tab-pane>
    <el-tab-pane label="图表定义" name="third" :lazy="true">
        <Draw-View :chartData="chartData" :unitId="unitId"></Draw-View>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Vue from 'vue'
import DrawSetView from '@/views/commonView/DrawSetView'
import Dimension from '@/views/commonView/Dimension'
import DraggableView from '@/views/commonView/DraggableView'
import FilterCond from '@/views/commonView/FilterCond'

Vue.component('Draw-View', DrawSetView)
Vue.component('Dimension', Dimension)
Vue.component('Draggable', DraggableView)
Vue.component('filter-cond', FilterCond)

export default {
  name: 'TagView',
  props: ['tableName', 'unitId'],
  data () {
    return {
      activeName: 'first',
      // fields: [],
      chartData: {},
      textFields: [],
      numberFields: [],
      rootData: {},
      fileds: []
    }
  },
  methods: {
    handleClick (tab, event) {
    },
    setData: function (type, data) {
      let d = {}
      // 更新维度
      if (type === 'dimension') {
        this.chartData = data
        // this.$emit('saveData', 'dimension', d);
        let param = {
          unitId: this.unitId,
          type: '1',
          pageNum: 1,
          pageSize: 15
        }
        let textFields = data.textFields1.slice(0)
        param.textFields1 = textFields.map(v => {
          v.columnSharp = []
          v.defGroups = {}
          return v
        })

        param.numberFields = data.numberFields.slice(0)
        let arr = data.textFields1
        let arr2 = data.numberFields
        arr.push.apply(arr, arr2)
        param.arr = arr
        this.fileds = param
        this.rootData = data.condition
        d = param
        this.$refs.filterCond.initRootData(data)
      }

      // 更新条件筛选
      if (type === 'FilterCond') {
        this.chartData = data
      }

      // 更新echarts配置
      if (type === 'echarts') {
        d.widgets = data
        // this.$emit('saveData', 'echarts', d);
      }
    }
  },
  mounted () {}
}
</script>
<style lang="less" scoped>
.label {
  position: relative;
  width: 100%;
  height: 100%;
  // padding: 0 0 0 20px;
}

.label el-tab-pane {
  width: 80%;
}

.main {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.header {
  height: 40%;
}
.seting {
  height: 100%;
  padding: 10px auto;
}

.main-body {
  height: 60%;
}
</style>
